<template>
    <div class="flex justify-between flex-wrap">
        <div
            v-for="skill in props.skills"
            :key="skill.id"
            class="bg-white text-center skill-item skill-item-w relative"
            style="border-radius: 16px"
            @click="handleSelected(skill)"
        >
            <div class="collection" @click.stop="handleCollection(skill)">
                <i
                    v-if="!skill.collection"
                    class="iconfont icon-shoucang opacity-0"
                />
                <i
                    v-else
                    class="iconfont icon-shoucang1"
                    style="color: #f6d12d"
                />
            </div>
            <img :src="skill.image" />
            <h4
                class="font-bold text-[16px] pt-[16px] pb-[8px] online-skill-list-item-title"
            >
                {{ skill.name }}
            </h4>

            <div
                class="text-[12px] text-[#838a95] text-overflow-l2 leading-tight text-center"
            >
                {{ skill.describe || '-' }}
            </div>
        </div>
        <div class="skill-item-w"></div>
        <div class="skill-item-w"></div>
        <div class="skill-item-w"></div>
        <div class="skill-item-w"></div>
        <div class="skill-item-w"></div>
        <div class="skill-item-w"></div>
        <div class="skill-item-w"></div>
    </div>
</template>
<script setup lang="ts">
import { postSkillCollection } from '~/api/skill'
import { useUserStore } from '~/stores/user'
const userStore = useUserStore()

const props = defineProps({
    skills: {
        type: Array,
        default: () => []
    }
})
const emits = defineEmits(['selected', 'collection'])

const handleCollection = (_row) => {
    postSkillCollection({
        user_id: userStore.userInfo?.id,
        skill_id: _row.id
    }).then(() => {
        ElMessage.success('操作成功')
        emits('collection', _row)
    })
}

const handleSelected = (row: any) => {
    emits('selected', row)
}
</script>

<style scoped lang="scss">
@import 'assets/styles/fix_online_css.scss';

.collection {
    position: absolute;
    cursor: pointer;
    right: 20px;
    transition: 0.2s all;

    top: 10px;
    i {
        font-size: 20px !important;
    }
}

.skill-item-w {
    //width: calc(16.66% - 16px);
    width: calc(20% - 20px);
    margin-right: 20px;
}

@media screen and (max-width: 1700px) {
    .skill-item-w {
        width: calc(20% - 20px);
    }
}
//@media screen and (max-width: 1650px) {
//    .skill-item-w {
//        width: calc(20% - 16px);
//    }
//}
.skill-item {
    @apply cursor-pointer;
    padding: 20px;
    height: 180px;
    transition: 0.2s all;
    margin-bottom: 20px;
    img {
        display: inline-block;
        width: 56px;
        height: 56px;
        border-radius: 50%;
    }

    &:hover {
        .icon-shoucang {
            opacity: 1;
        }
        box-shadow: 0 8px 16px #16037514;
        transform: translatey(-10px);
    }
}
</style>
